<template>
  <div id="app">
    <transition :name="animationName" mode="out-in">
      <keep-alive :include="include">
        <router-view></router-view>
      </keep-alive>
      <!-- </transition> -->
      <!-- <transition :name="animationName" mode="out-in"> -->
      <!-- <router-view  v-if="!$route.meta.keepAlive"></router-view> -->
    </transition>
  </div>
  <!-- <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>-->
</template>

<script>



// import svgIcon from './components/common/svg';
export default {
  data: () => ({
    include: ["creditQryMain"],

    animationName: "",
  }),
  beforeRouteUpdate(to, from, next) {
    // ...
    if (to.meta.deepth < from.meta.deepth) {
      this.animationName = "fade-right";
      console.log("-fade-right----", "");
    } else {
      console.log("-fade-left----", "");

      this.animationName = "fade-left";
    }
    next();
  },
  created() {
  

  },
  watch: {
    $route(to, from) {
      // document.body.scrollTop = 0;
      //            document.documentElement.scrollTop = 0;
      // if (to.meta.deepth < from.meta.deepth) {
      //   this.animationName = "fade-right";
      //   console.log("-fade-right----", "");
      // } else {
      //   console.log("-fade-left----", "");

      //   this.animationName = "fade-left";
      // }
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      // console.log('-----to---this.include.---------', this.include)

      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
        console.log("-----to---this.include.---------", this.include);
      }
      //如果 要 form(离开) 的页面是 keepAlive缓存的，
      //再根据 deepth 来判断是前进还是后退
      //如果是后退
      // if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
      if (to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
        console.log("-----back---this.include.---------", this.include);
      } else {
      }
    },
  },
};
</script>


<style lang="scss" scoped>
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
// body,
div,
span,
header,
footer,
nav,
section,
aside,
article,
ul,
dl,
dt,
dd,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
i,
b,
textarea,
button,
input,
select,
figure,
figcaption {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: normal;
  // font-family: "Microsoft Yahei";
  // box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-family: "PingFangSC-Regular", "helvetica neue", tahoma, "PingFang SC",
    "microsoft yahei", arial, "hiragino sans gb", sans-serif;
  &:hover {
    outline: none;
  }
}

#app {
  height: 100%;
  width: 100%;
}
input,
button {
  outline: none;
  border: none;
}
.router-fade-enter-active,
.router-fade-leave-active {
  // transition: ;
  animation: bottom-in 0.1s;
}
.router-fade-enter,
.router-fade-leave-to {
  opacity: 0s;
}
.fade-left-enter-active,
.fade-right-enter-active {
  transition: all 0.25s ease;
}
.fade-left-leave-active,
.fade-right-leave-active {
  transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-left-leave-to,
.fade-right-enter {
  transform: translate3d(-50%, 0, 0);
  opacity: 0;
}
.fade-left-enter,
.fade-right-leave-to {
  transform: translate3d(50%, 0, 0);
  opacity: 0;
}

@keyframes bottom-in {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 100px);
    transform: stranslate(0, 100px);
  }

  to {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: stranslate(0, 0);
  }
}
// @font-face {
//   font-family: 'FontAwesome';
//   src: url('../style/fonts/fontawesome-webfont.eot');
//   src: url('../style/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
//   url('../style/fonts/fontawesome-webfont.woff2') format('woff2'),
//   url('../style/fonts/fontawesome-webfont.woff') format('woff'),
//   url('../style/fonts/fontawesome-webfont.ttf') format('truetype'),
//    url('../style/fonts/fontawesome-webfont.svg') format('svg');
// }
</style>
<style>
@import "../style/css/font-awesome.min.css";
</style>
<style>
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>


